18. juli 2004 - 15:05
Der er
76 kommentarer
Brug af height og margin.
Hej eksperter.
Jeg sidder og er ved at lave en side for et firma, men er allerede stødt på to problemer, som sådan set er de samme.
Problem nr. 1 er at jeg vil have min side til at kante med bunden af browseren.
http://silenceart.dk/hosted/akanell2/ Jeg tror at den markerede <td> skal have en højde der svarer til resten af browseren. Hvilket jo er afhængig af klientens opløsning. Hvis jeg sætter den markerede td's height til 100%, sker der intet. Hvad skal jeg gøre for at få den til at dække, så selve siden kanter med browseren.
Min body ser således ud:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height: 100%;
margin: 0px;
padding: 0px;
}
(Ved godt margin forekommer et par gange ;-)
Problem nr. 2 er det samme, blot i en lidt fordrejet måde. Hvis man trykke ctrl-a vil man kunne se 2 markeringer i hver side. Hvordan fjerner jeg dem? Det sker da jeg ikke kan angive en width på 100% uden at have en i td'en. er nødvendig for at de to td'er i den tilhørende tr kan vises.
Håber det var forståeligt.
På forhånd tak.
Annonceindlæg fra Jobindex
En anden ting er højden ude i siden, som i IE heller ikke er 100%.
jeg ville sætte tabellen til 100% højde, og så sætte en fast højde på alle andre rækker end den den td er i. så vil den automatisk tilpasse sig resten af skærmen.
Sådan ser den allerede ud. Tabellen har en højde på 100% og samtlige td'er er angivet en højde i px, hvorefter den markerede ikke er.
problem#2: du kan undgå at have de 'tomme' colonner ude i siderne ved at sætte din tabels margin til auto. så fordeler den den ledige plads på begge sider.
body, html {
Aha, den kendte jeg ikke. Desværre er problemet der stadig i IE, så en fuldstændig løsning var det desværre ikke. :-)
jo der er. skal lige rode mine arkiver igennem for at finde den. hæng på.
Tak roenving.. Men tror allerede jeg har de mest nødvendige ting derfra. Prøver at tyde den.
18. juli 2004 - 15:21 #10
Er ikke så glad for at bruge alt det der position css.
18. juli 2004 - 15:42 #12
- og nu er alt overflødigt snask fjernet.
18. juli 2004 - 15:48 #13
Tror ikke det hjalp.. Indsatte "display: table;" i body css, samt "margin: auto; og height: 100%" på begge mine tables.
18. juli 2004 - 15:50 #14
Måske gør jeg noget forkert?
18. juli 2004 - 15:51 #15
du skal ikke have display: table; på din body.
18. juli 2004 - 15:57 #16
Det er gjort. dispay: table er fjernet fra body css igen.
18. juli 2004 - 15:59 #17
start med at fjerne din venstre og højre side (de to kolonner i tabellen). giv så tabellen en class, og sæt dennne class' margin til auto.
18. juli 2004 - 16:02 #18
Men så ryger toppen jo også ude i siderne
18. juli 2004 - 16:04 #19
alt det der visuelle snask skal vi nok sørge for kommer tilbage...
18. juli 2004 - 16:05 #20
åhh nej... du bruger jo en eller anden form for tekstur i toppen... damn... er den evt tilet?
18. juli 2004 - 16:07 #21
Ja, og jeg bruger den også i siden.. Hele vejen ned :-)
18. juli 2004 - 16:09 #22
Desuden virker margin: auto; umidlbart også kun i firefox. Du kan se forskellen nu
18. juli 2004 - 16:13 #23
Toppen vil jeg evt. kunne fixe med en overall baggrundsbillede, men selve den "border" der var omkring siden, er nu fjernet da den var en del af det andet. (Du ved, den skygge )
18. juli 2004 - 16:14 #24
du skal også lige sætte body, html's width til 100%;
18. juli 2004 - 16:16 #25
Det er den nu. Da jeg sagde border omkring, mente jeg på hver side af selve siden.
18. juli 2004 - 16:19 #26
hmm... det kan også skyldes at vi ikke bruger den samme dtd. er der en speciel grund til at du bruger html 4.01 og ikke en nyere?
18. juli 2004 - 16:23 #27
Nej, det er noget dreamweaver selv har lavet. Men har det indflydelse på resultatet?
18. juli 2004 - 16:23 #28
og hvorfor bruger style-tags i stedet for class/id og samling af det hele i din css-fil?
18. juli 2004 - 16:24 #29
nej, det havde det så ikke. jeg forstår faktisk ikke helt hvorfor den ikke gør som den får besked på. jeg roder lige lidt videre...
18. juli 2004 - 16:25 #30
Tak, skal du have. Har en backup af det tidligere, hvis du vil tilbage til noget
18. juli 2004 - 16:41 #31
Så har jeg ryddet lidt op i de styles.
18. juli 2004 - 17:55 #32
nu har jeg ryddet lidt op i din kode, og nu centrerer den også i ie. lægger du ikke lige det ud, så kigger vi på resten af problemerne.
18. juli 2004 - 17:56 #33
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Akanell</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="include/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="sitetable">
<!-- Midter side -->
<tr>
<td height="31" width="592" colspan="3" class="topborder_middle"></td>
</tr>
<tr>
<td width="197" height="154" class="left_logo"></td>
<td width="198" height="154" class="middle_logo"></td>
<td width="197" height="154" class="right_logo"></td>
</tr>
<tr>
<td height="18" width="592" colspan="3" class="languagebar"></td>
</tr>
<tr>
<td height="21" width="592" colspan="3" class="menubar"></td>
</tr>
<tr>
<td height="11" width="592" colspan="3" class="menushadow"></td>
</tr>
<tr>
<td colspan="3" bgcolor="#DBDBDB">
<!-- Main site START-->
dsdsds
<!-- Main site END-->
</td>
</tr>
<tr>
<td height="63" width="592" colspan="3" class="bottomtext"></td>
</tr>
</table>
</body>
</html>
18. juli 2004 - 18:00 #34
Har lagt det op. Kan godt være der lige går et par minutter mellem mine svar. Er ved at lave mad :-)
18. juli 2004 - 18:02 #35
det er helt i orden. var også lige selv væk en times tid på telefonen.
18. juli 2004 - 18:04 #36
kan du overtales til midlertidigt at sætte denne på din sitetable-class?
18. juli 2004 - 18:06 #37
Njaa, det kan nok godt lige komme på tale. Prøvede at sætte en vertical align: top, på samme class, uden det hjalp. (Siden er lidt forskudt)
18. juli 2004 - 18:08 #38
den hedder vertical-align med bindestreg.
18. juli 2004 - 18:11 #39
Ja, det var også det jeg indsatte. Skrev bare lidt for hurtigt herinde.
18. juli 2004 - 18:14 #40
Grunden til at jeg havde 2 tables inde i hinanden, er at jeg tidligere havde de to sidekanter som var tables. Det vil sige, selve hovedtablen bar på i alt 3 tables.
18. juli 2004 - 18:15 #41
men den fuckede bare med margin: auto; nu virker den del. nu skal vi bare have ie til at forstå højderne på de forskellige rækker. jeg roder videre...
18. juli 2004 - 18:28 #42
ie kan virkeligt give mig grå hår af og til. den lader til fuldstændigt at ignorere højdedefinitionerne. eller i hvert fald ikke at rette sig korrekt efter dem.
18. juli 2004 - 18:28 #43
Det er ligesom om IE udregner højden på en hel tåbelig måde. Den finder først højden angivet i %, hvorefter den så tillægger de andre højder som er angivet i px. Se fx nu.
18. juli 2004 - 18:29 #44
Ja lige præcis
18. juli 2004 - 18:31 #45
Er det problemet med at IE udvider relativt, når der er plads i overskud ?-)
18. juli 2004 - 18:34 #46
Ja det tror jeg.. Den er ikke så god til de procenter når der er tale om flere td'er over og under.
18. juli 2004 - 18:36 #47
roenving, ja. men det burde den ikke hvis man angiver en af rækkerne til * i højden. men det gør den alligevel.
18. juli 2004 - 18:36 #48
Hvis vi, som jeg, har 5 td'er hvor den i midten har en procentværdi (højde) på 60% mens de andre har en pixelværdi på 20px, så er det som om IE først finder den td hvis højde er angivet i procent. Når den så har fundet den, og den måske er 60%, jamen så laver den TD'en 60% af browseren. Herefter finder den så de yderligere 4 td'er hvis højde er angivet i pixel pludselig er siden langt større end beregnet.
18. juli 2004 - 18:43 #49
christian, den i midten skal i hvert fald ikke have 100% højde.
18. juli 2004 - 18:44 #50
Men er det ikke kun ved frames man kan bruge * ?
18. juli 2004 - 18:45 #51
nej... men den burde - når man undlader at definere højden på den ene række - give den række resten af pladsen.
18. juli 2004 - 18:52 #52
æhrj, hvor jeg ikke kan lide ie.
18. juli 2004 - 18:54 #53
Nej, det er godt nok problematisk!
18. juli 2004 - 19:10 #54
Roenving, har du ikke nogle forslag ? :-)
18. juli 2004 - 19:13 #55
ja, roenving. kom og øs af din ekspertise. jeg er helt lost.
18. juli 2004 - 19:21 #56
18. juli 2004 - 19:31 #57
#content{position:relative;height:100%;width:760px;margin:0 auto;}
18. juli 2004 - 20:06 #58
Jeg har ikke fulgt diskussionen her i detaljer, men ja, jeg tror, det er der, du kan finde noget, du kan bruge !-)
18. juli 2004 - 20:12 #59
Ifølge W3 burde man ikke bruge højde 100% på en table.
18. juli 2004 - 20:13 #60
Jo, men kun hvis du bruger det som style-property !-)
18. juli 2004 - 20:15 #61
Okay.
18. juli 2004 - 20:17 #62
Min teori er at det er mine colspan der forudsager det. Vil prøve at fjerne dem.
18. juli 2004 - 20:20 #63
Hmpf..! Hjalp heller ikke
19. juli 2004 - 21:44 #64
Hvis nu jeg begyndte forfra, hvordan ville i så anbefale jeg gjorde? Så samme konflikt helst ikke skulle opstå?
19. juli 2004 - 21:54 #65
Jeg ville anbefale, at du med højden gjorde sådan, som jeg viste i linket:
http://www.eksperten.dk/spm/488278#rid4511606 -- og så tilføjede den to-delte centrering med text-align på body til ie og margin:0 auto; til de regelrette browsere !-)
19. juli 2004 - 23:03 #66
Jeg skal prøve. Men det ser lidt indviklet ud med alt det <div> "i stedet" for td.
19. juli 2004 - 23:08 #67
Du skal bare stille det bedre op, end jeg har gjort, for det er faktisk simplere i antal tags !-)
19. juli 2004 - 23:11 #68
Nu har jeg prøvet at flytte rundt på det så det ligner min side (Bredde mæssigt) og fjernet banner og newsbag, men det er ikke til at arbejde med. Hvis jeg piller lidt i de forskellige bredder, så forsvinder det helt.
19. juli 2004 - 23:12 #69
Så kan jeg så bagefter sætte det ind i de 3 td'er du laver, som jeg havde i den gamle
19. juli 2004 - 23:48 #72
Et sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 strict//EN"
"
http://www.w3.org/TR/html401/strict.dtd"> <html>
<head>
<title>Fuld højde centreret simpelt</title>
<meta name="keywords" content="roenving,
http://www.eksperten.dk/spm/520876"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;text-align:center;}
#container{position:relative;height:100%;width:512px;margin:0px auto;text-align:left;}
#banner{position:absolute;height:125px;width:100%;background:yellow;z-index:1;}
#top1{width:100%;height:50px;background:#770;}
#top2{width:100%;height:75px;background:#707;}
#main{height:100%;background:green;}
#spacer{height:125px;}
#bottom{position:absolute;left:0px;bottom:0px;height:125px;width:100%;background:yellow;z-index:1;}
#bund1{width:100%;height:25px;background:#770;}
#bund2{width:100%;height:100px;background:#707;}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<div id="top1">top1</div>
<div id="top2">top2</div>
</div>
<div id="main">
<div id="spacer">Usynligt</div>
Hovedside</div>
<div id="bottom">
<div id="bund1">bund1</div>
<div id="bund2">bund2</div>
</div>
</div>
</body>
</html>
19. juli 2004 - 23:55 #73
Okay, jeg prøver at arbejde lidt med det. Tak for det
20. juli 2004 - 00:08 #75
Umidlbart ser det fint ud, der er bare lidt problemer med bredden, som burde være 512px.
14. december 2005 - 16:39 #76
Mon ikke det er ved at være lukketid ?-)
